<template>
	
	<wd-tabs v-model="tab">
		<block v-for="item in AreaTabs" :key="item">
			<wd-tab :title="item">
			</wd-tab>
		</block>
	</wd-tabs>
	
	<view class="area-list">
		<view class="area-list-li" v-for="(a,index) in areaList">
			<view class="area-list-li-content">
				<image class="area-image" :src="a.image" mode=""></image>
				<view class="area-content">
					<text class="area-name">用户名</text>
					<text class="area-mark">认证类型:{{a.mark}}</text>
					<text class="area-mark">申请时间:{{a.mark}}</text>
				</view>
			</view>
			<view class="area-list-li-options">
				<view class="area-list-li-options-left">
					<text></text>
				</view>
				<view class="area-list-li-options-right">
					<wd-button type="warning" size="small" hairline @click="clickRealInfo(li)">认证详情</wd-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import overallRequest from "@/utool/http/http.js"
	import {
		reactive,
		ref
	} from 'vue'

	import {
		onReady,
		onReachBottom
	} from "@dcloudio/uni-app"
	
	const AreaTabs = ref([
		"全部","个人","企业"
	])
	

	const areaList = reactive([])

	function clickHeaderLeft() {
		uni.navigateBack()
	}

	function clickHeaderRight() {

	}

	function clickRealInfo(item, index) {
		uni.navigateTo({
			url: "/pages/Mange/User/real/info"
		})
	}
	// 删除国家
	function deleteArea() {
		let url = "/address/deleteCountry"
		let id = null
		overallRequest(url, {
			methods: "POST",
			data: {
				id
			}
		}).then(res => {
			console.log(res);
		}).catch(err => {
			console.log(err);
		})
	}
	// 获取国家列表
	function getAreaList() {
		let url = "/address/countryList"
		overallRequest(url).then(res => {
			console.log(res);

			let {
				list
			} = res.data
			areaList.push(...list)
		}).catch(err => {
			console.log(err);
		})
	}
	onReady(() => {
		getAreaList()
	})

	// 滚动页面到底部
	onReachBottom(() => {


	})
</script>

<style scoped>
	page {
		height: 100%;

	}

	.navbar-right {
		display: flex;
		gap: 25rpx;
		align-items: center;
	}

	.area-list {
		display: flex;
		flex-direction: column;
		gap: 15px;
		padding: 30rpx 20px;
		height: 100%;
		background: #c3c3c322;
	}

	.area-list-li {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: white;
		border-radius: 10px;
		padding: 20rpx;
		padding-left: 25rpx;
	}

	.area-list-li-content {
		display: flex;
		align-items: center;
		width: 100%;
		justify-content: space-between;
		gap: 25rpx;
		align-items: flex-start;
	}

	.area-list-li-options {
		width: 100%;
		display: flex;
		padding-top: 15rpx;
		border-top: 1rpx solid #d9d9d944;
		margin-top: 20rpx;
	}

	.area-list-li-options-left {
		flex: 1
	}

	.area-list-li-options-right {
		display: flex;
		gap: 15rpx;
	}

	.area_list_li:active {
		background-color: #c3c3c344;
	}

	.area-image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: gray;
	}

	.area-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.area-name {
		font-size: 30rpx;
	}

	.area-mark {
		font-size: 24rpx;
		color: gray;
	}
</style>